import React, { useEffect, useState, useRef } from 'react';
import { Row, Col, Form, Modal, Button, Select, InputNumber } from 'antd';
import style from '@/pages/IndexPage.css';

const { Option } = Select;
const mockData = [];
for( let i=0; i < 12; i++){
    mockData.push({ label:'螺杆机温度设置' + i, key:i });
}
function ParamsSetting({ visible, info, onClose }){
    const [form] = Form.useForm();
    const [fieldList, setFieldList] = useState(mockData);
    const handleSubmit = ()=>{
        form.validateFields()
        .then(values=>{
            console.log(values);
        })
    }
    return (
        <Modal
            width='50%'
            open={visible}
            onCancel={onClose}
            className={style['custom-modal']}
            bodyStyle={{ padding:'24px 48px' }}

            footer={(
                <div>
                    <Button onClick={onClose}>取消</Button>
                    <Button type='primary' onClick={()=>handleSubmit()}>参数下发</Button>
                </div>
            )}
            title='设备参数设置'
        >
            <div>
                <div>
                    <Select className={style['custom-select']} style={{ width:'200px', marginBottom:'2rem' }} value='1'>
                        <Option value='common'>公共参数</Option>
                        <Option value='1'>螺杆机</Option>
                    </Select>
                    <Form
                        form={form}
                        className={style['custom-form']}
                        layout="vertical"
                    >
                        <Row gutter={24}>
                            {
                                fieldList.map((item)=>(
                                    <Col key={item.key} span={8}>
                                        <Form.Item
                                            name={item.key}
                                            label={item.label}
                                        >
                                            <InputNumber style={{ width:'100%', marginBottom:'20px' }} addonAfter='℃' />
                                        </Form.Item>
                                    </Col>
                                ))
                            }
                        </Row>
                    </Form>
                </div>
            </div>
        </Modal>
    )
}

export default ParamsSetting;